<style>
    .tab-content > .chart {
        padding: 15px;
    }
</style>

<div>

    <form action="" role="form" class="form-commonsearch">


        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:5px 20px;">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">日期选择</label>
                        <div>
                            <input class="form-control datetimerange" name="row[date]" placeholder="统计日期" id="date"
                                   data-index="1" autocomplete="off"/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">店铺选择</label>
                        <div class="row">
                            <div class="col-xs-12">
                                <input id="shop_id" data-source="shop/shop/selectpage"
                                       class="form-control selectpage form-control" name="row[shop_id]" type="text"/>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label"></label>
                        <div class="row">
                            <div class="col-xs-6">
                                <input type="button" id="btn" class="btn btn-success btn-block" value="提交"/>
                            </div>
                            <div class="col-xs-6">
                                <input type="reset" id="reset" class="btn btn-primary btn-block" value="重置"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>


<!-- /.row -->
<!-- Main row -->
<div class="row" style="margin-bottom:5px;">


    <!-- Left col -->
    <section class="col-lg-12 connectedSortable">


        <div class="nav-tabs-custom charts-custom">

            <div class="tab-content no-padding">
                <!-- Tabs within a box -->
                <ul class="nav nav-tabs pull-right">
                    <li class="pull-left header"><i class="fa fa-inbox"></i>包厢统计</li>
                </ul>
                <table id="table" class="table table-striped table-bordered table-hover" width="100%">
                    <thead>
                    <td>包厢名</td>
                    <td>营业额</td>
                    <td>订单数</td>
                    </thead>

                    <tr id="template">

                    </tr>

                </table>
            </div>
        </div>


        <!-- Custom tabs (Charts with tabs)-->
        <div class="nav-tabs-custom charts-custom">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs pull-right">
                <li class="active"><a href="#line-chart" data-toggle="tab">交易金额</a></li>
                <li><a href="#area-chart" data-toggle="tab">利润</a></li>
                <li class="pull-left header"><i class="fa fa-inbox"></i>统计</li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <div class="chart tab-pane active" id="line-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="area-chart" style="position: relative; height: 300px;"></div>
            </div>
        </div>

    </section>

    <!-- right col -->
</div>


<!-- /.row (main row) -->
